<template>
    <div class="float-lyric" ref="lyric" @mouseover="isShowBg = true" @mouseleave="isShowBg = false" @mousedown="dragLyric">
        <div class="lyric">
            <!-- 关闭按钮 -->
            <div class="close" v-if="isShowBg" @click="closeFloatLyric">
                <span class="iconfont icon-guanbi1"></span>
            </div>
            <!-- 没歌词时 -->
            <div class="nolyric" v-if="currentLyric.length == 0">
                暂无歌词
            </div>
            <!-- 有歌词时 -->
            <div id="floatLyric" v-else ref="floatLyric" :class="{bg:isShowBg}" >
                <div class="lyricRow" v-for="(item,index) in currentLyric" :key="index" :class="{currentActive : currentRow == index}">
                    <span>{{item.text}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'',
    data() {
        return {
            isShowBg:false
        }
    },
    methods:{
        // 关闭悬浮歌词
        closeFloatLyric(){
            this.$store.dispatch('isShowLyric',!this.isShowFloatLyric)
        },
        // 拖动歌词的位置
        dragLyric(e) {
			// 先获取鼠标在盒子内的坐标
			// 鼠标按下，要得到一开始鼠标距离div的的距离。
			let x = e.pageX - this.$refs.lyric.offsetLeft;
			let y = e.pageY - this.$refs.lyric.offsetTop;
			let lyric = this.$refs.lyric;
			// 鼠标移动只有鼠标按下才能触发  移动事件写到按下事件里面
			document.addEventListener("mousemove", move);
			function move(e) {
				// 鼠标移动，就让歌词框的坐标 设置为 :当前鼠标距离屏幕的距离 - 鼠标距离div的距离
				lyric.style.left = e.pageX - x + "px";
				lyric.style.top = e.pageY - y + "px";
			}
			// 鼠标松开，就停止拖拽，让鼠标移动事件解除
			document.addEventListener("mouseup", function () {
				document.removeEventListener("mousemove", move);
			});
		},
    },
    mounted(){
        // 防止页面刷新，歌词定位错误
        // if(this.isShowFloatLyric && this.currentLyric.length !== 0){
        //     this.$refs.floatLyric.scrollTop =  40 * this.currentRow;
        // }
    },

    computed:{
        ...mapState({
            currentLyric:(state) =>{
                return state.playmusic.currentLyric
            },
            // 当前歌曲播放的时间
            currentSecond:state => state.playmusic.currentSecond,
            // 获取当前播放的行数
            currentRow:state => state.playmusic.currentRow,
            isShowFloatLyric:state => state.playmusic.isShowFloatLyric
        })
    },
    watch:{
        currentSecond(currentSecond){    
            // 计算时间
            let nowTime = Math.ceil(currentSecond)
            this.currentLyric.forEach((item,index) =>{
                if(nowTime == item.time){
                    this.$refs.floatLyric.scrollTop =  40 * index;
                }
            })
        },
        isShowFloatLyric(){     
            if(this.isShowFloatLyric && this.currentLyric.length !== 0){
                this.$refs.floatLyric.scrollTop =  40 * this.currentRow;
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
    .float-lyric{
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translateX(-50%);
        cursor: move;
        z-index: 1100;
    }

.bg {
	background: rgba(100, 100, 100, 0.3);
}
    .lyric{
        // border: 1px solid black;
        position: relative;
        width: 500px;
        height: 40px;
        text-align: center;
        .close{
            position: absolute;
            right: 5px;
            top: 5px;
            z-index: 9999;
            cursor: pointer;

        }
        .nolyric{
            font-size: 18px;
            font-weight: 700;
            line-height: 18px;
        }
        #floatLyric{
            position: absolute;
		    top: 0px;
		    width: 100%;
            overflow-y: hidden;
            height: 40px;
            .lyricRow {
                height: 40px;
                line-height: 40px;
            }
            .currentActive {
                font-size: 22px;
                color: var(--themeColor);
                font-weight: 700;
		    }
        }    
    }
</style>